import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import BillMain from "./billMain";
import { addBill, getBillList } from "../../utils/api/billApi";
import { notification, message } from "antd";
import { formatUnits, numberToFixed } from "../../utils/billUtils";

const BillWrap = props => {
  const [date, setDate] = useState(new Date());
  const [money, setMoney] = useState();
  const [desc, setDesc] = useState("");
  const [type, setType] = useState("其他");
  const [isIncome, setIsIncome] = useState(false);
  const [incomeList, setIncomeList] = useState([]);
  const [outcomeList, setOutcomeList] = useState([]);
  const [isUpdataBill, updataBills] = useState(false);
  const [isSubmit, setIsSubmit] = useState(false);
  const history = useHistory();

  useEffect(() => {
    // 获取账单数据
    getBillList()
      .then(res => {
        if (res.err === 0) {
          const data = res.data;
          let incomeList = [],
            outcomeList = [];
          data.forEach(item => {
            let res = formatUnits(item.price);
            const { money, unit } = res;
            item.money = numberToFixed(money);
            item.unit = unit;
            item.income ? incomeList.push(item) : outcomeList.push(item);
          });
          setIncomeList(incomeList);
          setOutcomeList(outcomeList);
        } else if (res.err === -998) {
          message.error("登录过期，请重新登录！");
          history.push("/login");
        } else {
          notification.error({
            message: res.msg
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  }, [isUpdataBill, history]);

  const handleSetDate = value => {
    if (value) {
      setDate(value.toDate());
    } else {
      setDate(null);
    }
  };

  const handleSetMoney = ev => {
    let value = ev.target.value;
    value ? setMoney(value) : setMoney();
  };

  const handleSetDesc = ev => {
    setDesc(ev.target.value);
  };

  const handleSetType = type => {
    setType(type);
  };

  const handleSetIsIncome = isIncome => {
    setIsIncome(isIncome);
  };

  const handleSubmit = () => {
    if (date && money && desc && type) {
      if (money > 10000000000) {
        message.warn("钱太多啦，小的装不下啊！");
        return;
      }
      setIsSubmit(true);
      addBill({
        date,
        money,
        desc,
        type,
        isIncome
      })
        .then(res => {
          if (res.err === 0) {
            notification.success({
              message: "数据插入成功！"
            });
            updataBills(!isUpdataBill);
            setDesc("");
            setIsIncome(false);
            setMoney();
            setType("其他");
            setIsSubmit(false);
          } else if (res.err === -998) {
            message.error("登录过期，请重新登录！");
            history.push("/login");
          } else {
            notification.error({
              message: res.msg
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    } else {
      message.error("请填写完整的账单数据！", 2);
    }
  };

  return (
    <BillMain
      incomeList={incomeList}
      outcomeList={outcomeList}
      money={money}
      type={type}
      desc={desc}
      isIncome={isIncome}
      isSubmit={isSubmit}
      handleSetDate={handleSetDate}
      handleSetMoney={handleSetMoney}
      handleSetDesc={handleSetDesc}
      handleSetType={handleSetType}
      handleSetIsIncome={handleSetIsIncome}
      handleSubmit={handleSubmit}
    />
  );
};

export default BillWrap;
